let mask = document.querySelector('.mask')
let smallBox = document.querySelector('.smallBox')
let smallImg = document.querySelector('.smallBox>img')
let box = document.querySelector('.box')
let bigBox = document.querySelector('.bigBox')
let bigBoxImg = document.querySelector('.bigBox>img')

box.addEventListener('mousemove', function (e) {
    mask.style.display = 'block'
    bigBox.style.display = 'block'
    let moveX = e.pageX - box.offsetLeft - mask.offsetWidth / 2
    let moveY = e.pageY - box.offsetTop - mask.offsetHeight / 2
    let maskX = smallBox.offsetWidth - mask.offsetWidth
    let maskY = smallBox.offsetHeight - mask.offsetHeight
    // console.log(box.offsetLeft)
    if (moveX <= 0) {
        moveX = 0
    } else if (moveX >= maskX) {
        moveX = maskX
    }

    if (moveY <= 0) {
        moveY = 0
    } else if (moveY >= maskY) {
        moveY = maskY
    }
    // (moveX <= 0) && (moveX = 0)
    //     (moveY <= 0) && (moveY = 0)
    //     (moveX >= maskX) && (moveX = maskX)
    //     (moveY >= maskY) && (moveY = maskY)
    mask.style.transform = `translate(${moveX}px,${moveY}px)`

    let bigImgX = moveX * (bigBoxImg.offsetWidth - bigBox.offsetWidth) / maskX
    let bigImgY = moveY * (bigBoxImg.offsetHeight - bigBox.offsetHeight) / maskY
    bigBoxImg.style.transform = `translate(${-bigImgX}px,${-bigImgY}px)`
})
box.addEventListener('mouseleave', function () {
    mask.style.display = 'none'
    bigBox.style.display = 'none'
})

let box_pics = document.querySelector('.box_pics');
// let pic = document.querySelectorAll('.pic');
// for (let i = 0; i < box_pics.children.length; i++) {
//     box_pics.children[i].addEventListener('mouseover', function (e) {
//         let url = box_pics.children[i].src;
//         for (var k of pic) {
//             k.src = url;
//         }
//     })
// }

box_pics.addEventListener('mousemove', function (e) {
    bigBoxImg.src = e.target.src;
    smallImg.src = e.target.src;
})
// box_pics.addEventListener('mouseenter', function (e) {
//     // console.log(1)
//     console.log(e.target);
// })
// box_pics.addEventListener('mouseenter', function (e) {
//     console.log(1)
// })

